<script setup>
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'

const activeIndex = ref(0)
let navsAry = [
  {
    name: '图片格式',
    path: '/convertFormat',
    page: 'convertFormat',
    icon: 'icon-scan',
    status: 1
  },
  {
    name: '图片尺寸',
    path: '/modifySize',
    page: 'modifySize',
    icon: 'icon-smallscreen',
    status: 1
  },
  {
    name: '图片水印',
    path: '/waterMark',
    page: '',
    icon: 'icon-dynamic',
    status: 1
  },
  {
    name: '图片裁剪',
    path: '/',
    page: 'imageCrop',
    icon: 'icon-video',
    status: 0
  },
  {
    name: '图片旋转',
    path: '/',
    page: '',
    icon: 'icon-tools',
    status: 0
  }
]

function setActive(index, status) {
  if (status !== 1) return
  activeIndex.value = index
}
</script>

<template>
  <div class="page">
    <div class="nav-slide">
      <p
        v-for="({ name, path, icon, status }, index) in navsAry"
        :key="index"
        :class="{
          'nav-item flex-box flex-acenter flex-jcenter': true,
          cur: index === activeIndex,
          dis: status !== 1
        }"
        @click="setActive(index, status)"
      >
        <i :class="['ico iconfontygl', icon]"></i>
        <RouterLink :to="{ path: path }">{{ name }}</RouterLink>
      </p>
    </div>
    <div class="main flex1 flex-box">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.page {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.page .nav-slide {
  border-right: 1px solid #ccc;
  padding: 10px 0;
  text-align: center;
  width: 15vw;
}

.page .nav-slide .nav-item {
  padding: 5px 0;
  cursor: pointer;
}

.page .nav-slide .nav-item.cur {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  //transition: 0.4s;
}

.page .nav-slide .nav-item.cur a {
  color: hsla(160, 100%, 37%, 1);
  //transition: 0.4s;
}

.page .nav-slide .nav-item .ico {
  font-size: 24px;
  margin-right: 7px;
}

.page .nav-slide .nav-item.dis {
  color: #ccc;
  cursor: not-allowed;
}

.page .nav-slide .nav-item.dis a {
  color: #ccc;
  cursor: not-allowed;
}
</style>
